import React from "react";
import {LdhFieldSet} from "@biz/PageCompnents";
import {LdhFormItem, LdhInput, LdhInputNumber, LdhMapSelect, LdhObjListSelect} from "@biz/Components";
import BaseDetailPage from "@biz/BaseDetailPage";
import {createAction} from "../Action";
import Config from "../config";
import Store from "../Store";


export default class MenuDetail extends BaseDetailPage {

    constructor(props) {
        super(props);
        this.action = createAction();
        this.config = Config(this.action);
        this.store = new Store(props, this.config, this.action);
    }

    componentDidMount() {
        super.componentDidMount();
        setTimeout(() => this.initMenu(), 1000);
    }

    initMenu() {
        let {menus = []} = (window.user || {});
        menus = menus.filter(o => !o.parentId);
        let menuMap = {};
        menus.forEach(o => {
            menuMap[o.id] = o;
        })
        this.setState({menus, menuMap});
    }


    handleCodeChange(e) {
        let value = e.target.value;
        let path = "";
        if (value) {
            path = "/" + value.replaceAll(".", "/");
        }
        super.form().setFieldValue("path", path);
    }

    handleParentChange(v) {
        let {menuMap} = this.state;
        let m = menuMap[v];
        if (m) {
            let {code, path, order, scope} = m;
            let v = {
                code: code + ".",
                path: path + "/",
                order: order + 10,
                scope,
            }
            super.form().setFieldsValue(v);
        }
    }

    renderDetail(isDetail) {
        let {loading, menus = []} = this.state;
        return <LdhFieldSet title="基本信息" btn={!isDetail} loading={loading}>
            <LdhFormItem label="父级菜单" name="parentId" isDetail={isDetail}>
                <LdhObjListSelect list={menus} className="w-200" onChange={this.handleParentChange.bind(this)}/>
            </LdhFormItem>
            <LdhFormItem label="类型" name="scope" required isDetail={isDetail}>
                <LdhMapSelect type="Scope"/>
            </LdhFormItem>

            <LdhFormItem label="编码" name="code" required isDetail={isDetail}>
                <LdhInput maxLength={60} showCount onChange={this.handleCodeChange.bind(this)}/>
            </LdhFormItem>

            <LdhFormItem label="名称" name="name" required isDetail={isDetail}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>

            <LdhFormItem label="路径" name="path" isDetail={isDetail}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>

            <LdhFormItem label="顺序" name="order" isDetail={isDetail}>
                <LdhInputNumber min={100000} className="w-120" step={10}/>
            </LdhFormItem>


        </LdhFieldSet>

    }
}